import { saveAs } from 'file-saver';
<template>
    <div id="modelParams" class="modelParams">
		<div class="content_wrap">
            <div class="imgContent">
                <el-image 
                    style="height: 100%;"
                    :src="require('@/assets/image/27C5A911-8125-4bd5-8C73-A42B97CF6869.png')" 
                    :preview-src-list="[require('@/assets/image/27C5A911-8125-4bd5-8C73-A42B97CF6869.png')]">
                </el-image>
            </div>
            <el-divider></el-divider>
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item>
                    <el-button v-if="!isEdit" type="primary" @click="changeEdit">编辑</el-button>
                    <el-button v-if="isEdit" type="primary" @click="onSubmit">保存</el-button>
                </el-form-item>
                <p class="gorup_title">运行参数：</p>
                <el-form-item label="运行条件：">
                    <el-checkbox label="压力超出异常运行" v-model="form.ylccycyx" :disabled="!isEdit"></el-checkbox>
                </el-form-item>
                <el-form-item label="运行方式：">
                    <el-radio-group v-model="form.yxfs" >
                    <el-radio label="全局运行" :disabled="!isEdit"></el-radio>
                    <el-radio label="局部运行" :disabled="!isEdit"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-divider></el-divider>
                <p class="gorup_title">超参数：</p>
                <el-form-item label="模型：">
                    <el-select v-model="form.mx" placeholder="请选择模型：" :disabled="!isEdit">
                    <el-option label="DGP" value="DGP"></el-option>
                    <el-option label="R-GCN" value="R-GCN"></el-option>
                    <el-option label="STGCN" value="STGCN"></el-option>
                    <el-option label="DCRNN" value="DCRNN"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="卷积核：">
                    <el-select v-model="form.jjh" placeholder="请选择卷积核：" :disabled="!isEdit">
                    <el-option label="[7x7]" value="[7x7]"></el-option>
                    <el-option label="[5x5]" value="[5x5]"></el-option>
                    <el-option label="[3x3]" value="[3x3]"></el-option>
                    <el-option label="[1x1]" value="[1x1]"></el-option>
                    <el-option label="[7x1,1X7]" value="[7x1,1X7]"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学习率：">
                    <el-select v-model="form.xxl" placeholder="请选择学习率：" :disabled="!isEdit">
                    <el-option label="1" value="1"></el-option>
                    <el-option label="0.1" value="0.1"></el-option>
                    <el-option label="0.01" value="0.01"></el-option>
                    <el-option label="0.001" value="0.001"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权重衰减系数：">
                    <el-input v-model="form.qzsjxs" max-length="200" :disabled="!isEdit"></el-input>
                </el-form-item>
                <el-form-item label="批大小：">
                    <el-input v-model="form.pdx" :disabled="!isEdit"></el-input>
                </el-form-item>
                <el-form-item label="dropout：">
                    <el-input v-model="form.dropout" :disabled="!isEdit"></el-input>
                </el-form-item>
                <el-form-item label="优化器：">
                    <el-select v-model="form.yhq" placeholder="请选择优化器" :disabled="!isEdit">
                    <el-option label="动量梯度下降" value="动量梯度下降"></el-option>
                    <el-option label="Adagrad" value="Adagrad"></el-option>
                    <el-option label="Adadelta" value="Adadelta"></el-option>
                    <el-option label="Adam" value="Adam"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="损失函数：">
                    <el-select v-model="form.sshs" placeholder="请选择损失函数" :disabled="!isEdit">
                    <el-option label="L1" value="L1"></el-option>
                    <el-option label="MSE" value="MSE"></el-option>
                    <el-option label="CrossEntropy" value="CrossEntropy"></el-option>
                    <el-option label="KLDiv " value="KLDiv "></el-option>
                    <el-option label="BCE" value="BCE"></el-option>
                    <el-option label="Hinge" value="Hinge"></el-option>
                    </el-select>
                </el-form-item>
                
                </el-form>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>保存成功！</span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

	</div>
</template>

<script>

let fs = require('fs');
export default {
	name:'modelParams',
	data(){
		return {
            isEdit:false,
            form: {
                ylccycyx: '',
                yxfs: '',
                mx: '',
                jjh: '',
                xxl: false,
                qzsjxs: [],
                pdx: '',
                dropout: '',
                yhq:'',
                sshs:''
            },
            dialogVisible:false
		}
	},
	components:{
		hjTable:()=> import ('@/components/hjTable/HJTable.vue')
	},
    created(){
        this.initData();
    },  
    mounted(){
    },
	methods:{
        initData(){
            // let data = require('@/assets/json/modelParams.json');
            // Object.assign(this.form,data)
            debugger
            thi.$fs.readFile('@/assets/json/modelParams.json', 'utf-8',(err, data) => {
                debugger
                if (err) throw err;
                console.log(data);
            });
        },
        changeEdit(){
            this.isEdit = !this.isEdit;
        },
        onSubmit() {
            this.isEdit = !this.isEdit;
            this.dialogVisible = true;
        },
        handleClose(){

        }
    }
}
</script>

<style lang="less" scoped>
.modelParams{
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #02182d;
		box-sizing: border-box;
		.content_wrap{
			position: relative;
			width: 100%;
            height: 100%;
			box-sizing: border-box;
            padding: 20px;
            background-color: #ffffff;
            overflow-y: scroll;
            .imgContent{
                height: 280px;
                img{
                    height: 100%;
                }
            }
            .el-form{
                .gorup_title{
                    font-size: 14px;
                    color: #02182d;
                    line-height: 40px;
                    padding-left: 10px;
                    background-color: #ececec;
                    margin-bottom: 10px;
                }
                .el-input{
                    width: 260px;
                }
            }
            
        }
	}
	
</style>